<template>
    <div>
        <el-form :model="form" :rules="rules" label-position="right" ref="form" label-width="160px">
            <el-form-item label="所属广告栏目：" prop="cb_cbcid">
                <el-col :span="8">
                    <el-select style v-model="form.cb_cbcid" placeholder="请选择所属广告栏目">
                        <el-option
                                v-for="item in bannerColumnData"
                                :key="item.cbc_id"
                                :label="item.cbc_name"
                                :value="item.cbc_id"
                        ></el-option>
                    </el-select>
                </el-col>
            </el-form-item>
            <el-form-item label="广告名称：" prop="cb_title">
                <el-col :span="8">
                    <el-input v-model="form.cb_title" placeholder="请输入广告名称"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item label="广告图片：" prop="cb_image_url">
                <el-col :span="8">
                    <upload-image
                            style="width:328px"
                            :preview="form.cb_image_url"
                            v-on:cropperImage="cropperImageClick"
                            v-on:uploadImageChange="uploadImageChange"
                    ></upload-image>
                    
				   					<el-button @click="imgBoxBtn(form)" style="margin-top: 10px;">从图库选择</el-button>
                </el-col>
            </el-form-item>
            <el-form-item label="广告描述：" prop="cb_describe">
                <el-col :span="8">
                    <el-input type="textarea" v-model="form.cb_describe" rows="5" placeholder="请输入广告描述"></el-input>
                </el-col>
            </el-form-item>
            <el-form-item label="广告跳转地址：" prop="cb_url">
                <el-col :span="8">
                    <el-input v-model="form.cb_url" placeholder="请输入广告跳转地址"></el-input>
                </el-col>
            </el-form-item>
            <el-col :span="24" v-if="customModelData.length > 0">
                <div class="customFieldInput">
                    自定义模型设置（该部分为自定义模型部分，如果没有自定义模型，则不会显示）
                </div>
            </el-col>
            <el-form-item :label="'自定义模型 ' + (index+1) + ' :'" v-for="item,index in customModelData">
                <el-col :span="8">
                    <el-input type="textarea" rows="4" v-model="form[item.COLUMN_NAME]"
                              :placeholder="item.COLUMN_COMMENT + '，数据类型：' + (item.DATA_TYPE == 'varchar' ? '文本' : '数字')"></el-input>
                    <span class="fieldCommentHint">{{item.COLUMN_COMMENT}}</span>
                </el-col>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm('form')">提交</el-button>
                <el-button @click="resetForm">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import {mapState, mapMutations} from "vuex";

    export default {
        //数据源
        data() {
            return {
                rules: {
                    cb_cbcid: [
                        {required: true, message: "广告位置不能为空", trigger: "blur"}
                    ]
                }
            };
        },
        //初始化函数
        mounted() {
            //获取广告栏目信息
            this.getBannerColumn();
            //获取自定义模型
            this.getCustomField();
        },
        //计算属性
        computed: {
            ...mapState({
                form: state => state.AddBannerModule.form,
                bannerColumnData: state => state.AddBannerModule.bannerColumnData,
                customModelData : state => state.AddBannerModule.customModelData
            })
        },
        //组件方法
        methods: {
            getCustomField(){

                var params = {
                    // appKey 	  : this.$localData.getEasydCloudAppKey(),
                    appKey 	  : 'easyd_cms',
                    tableName : "easyd_cms_banner"
                }

                this.$myLoading.startLoading()
                this.$http.postHttp(
                    this.$API.modelManagerGetCustomModel,
                    params,
                    rs => {
                        this.$store.commit('AddBannerModule/updateCustomModelData',rs)
                        this.$myLoading.endLoading()
                    }
                )
            },
            getBannerColumn() {
                this.$myLoading.startLoading();
                this.$http.getHttp(
                    this.$API.cmsBannerColumnSearch + "/skip/0/limit/1000/cbc_is_delete/0",
                    rs => {
                        this.$myLoading.endLoading();
                        this.$store.commit("AddBannerModule/updateBannerColumnData", rs.data);
                    }
                );
            },
            submitForm(form) {
                this.$refs[form].validate(valid => {
                    if (valid) {
                        this.form.cb_create_time = this.$common.currentTime()
                        this.$myLoading.startLoading();
                        this.$http.postHttp(this.$API.cmsBannerAdd, this.form, rs => {
                            this.$myLoading.endLoading();
                            this.$myPop.SuccessMessage();
                            this.resetForm();
                        });
                    }

                });
            },
            cropperImageClick() {
                var that = this;
                this.$cropperImage({
                    //裁切完成后回调函数
                    cropperImageResult(file) {
                        that.$myLoading.startLoading();
                        that.$http.Aliyun_uploadImageHttp(file, rsUrl => {
                            that.$myLoading.endLoading();
                            that.form.cb_image_url = rsUrl;
                        });
                    },
                    //要裁切的图片
                    imgUrl: this.form.cb_image_url
                });
            },
            uploadImageChange(e) {
                var fileObj = e.target.files[0];
                this.$myLoading.startLoading();
                this.$http.Aliyun_uploadImageHttp(fileObj, rsUrl => {
                    this.$myLoading.endLoading();
                    this.form.cb_image_url = rsUrl;
                });
            },
            resetForm() {
                this.$store.commit("AddBannerModule/clearForm");
            },
            imgBoxBtn(items) {
                var that = this
                //回调函数
                this.$selectImageBox({
                    selectImageValue(item){
                    	console.log('------回调！？？！？！')
                    	console.log(item)
                    	items.cb_image_url = item;
                    }
                })
            },
        }
    };
</script>

<style lang="stylus" scoped>
    @import '~PUBLIC_CSS';
    .customFieldInput {
        width 100%
        height 40px
        background #eee
        margin-bottom 30px
        padding-left 20px
        box-sizing border-box
    }

    .fieldCommentHint {
        color red
    }
</style>